<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-descriptions title="" :column="2" :size="size" border>
      <el-descriptions-item label="作业名称">{{homework.name}}</el-descriptions-item>
      <el-descriptions-item label="所属成员">{{homework.memberFamilyName}}</el-descriptions-item>
      <el-descriptions-item label="作业类型">
        <el-tag type="" size="mini" v-if="homework.type === 1">当天必须完成</el-tag>
        <el-tag type="success" size="mini" v-else-if="homework.type === 2">周期</el-tag>
        <el-tag type="warning" size="mini" v-else-if="homework.type === 3">限时</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="作业是否可选">
        <el-tag size="mini" v-if="homework.optional === 2">强制完成</el-tag>
        <el-tag size="mini" v-else-if="homework.optional === 1">非强制</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="作业开始时间">{{homework.startTime}}</el-descriptions-item>
      <el-descriptions-item label="最近一次执行时间">{{homework.execTime}}</el-descriptions-item>
      <el-descriptions-item label="作业截止时间">{{homework.deadline}}</el-descriptions-item>
      <el-descriptions-item label="完成频率">{{homework.frequency}} 天/次</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag type="info" size="mini" v-if="homework.status === 10">等待执行</el-tag>
        <el-tag type="" size="mini" v-else-if="homework.status === 20">进行中</el-tag>
        <el-tag type="success" size="mini" v-else-if="homework.status === 90">已完成</el-tag>
        <el-tag type="danger" size="mini" v-else-if="homework.status === 92">已延期</el-tag>
        <el-tag type="success" size="mini" v-else-if="homework.status === 91">延期完成</el-tag>
        <el-tag type="warning" size="mini" v-else-if="homework.status === 93">停止</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="额外作业">
        <el-tag type="success" size="mini" v-if="homework.additional === 2">额外的</el-tag>
        <el-tag type="" size="mini" v-else-if="homework.additional === 1">非额外</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="学科类别">{{homework.subjectName}}</el-descriptions-item>
      <el-descriptions-item label="难度系数"><el-rate disabled v-model="homework.difficulty"></el-rate></el-descriptions-item>
      <el-descriptions-item label="检查情况">
        <el-tag type="info" size="mini" v-if="homework.checkHomework === 1">未检查</el-tag>
        <el-tag type="mini" size="mini" v-else-if="homework.checkHomework === 2">永久不检查</el-tag>
        <el-tag type="success" size="mini" v-else-if="homework.checkHomework === 3">已检查</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-alarm-clock"></i>
          录入时间
        </template>
        {{getTime(homework.createTime)}}
      </el-descriptions-item>

    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">详情</template>{{homework.remarks}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">评分标准</template>{{homework.scoringCriteria}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">知识点</template>{{homework.knowledgePoints}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">作业评价</template>{{homework.evaluate}}
      </el-descriptions-item>
    </el-descriptions>






    <!--列表部分-->
    <el-card style="margin-top: 10px">

      <el-table
        :data="homeworkRecordTable.data"
        max-height="600px"
        height="600px"
        style="width: 100%">

        <el-table-column prop="submitTime" label="作业提交时间"></el-table-column>
        <el-table-column prop="supplementary" label="是否补交">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.supplementary === 1">正常</el-tag>
            <el-tag type="warning" size="mini"  v-else-if="scope.row.supplementary === 2">补交</el-tag>
          </template>
        </el-table-column>

      </el-table>
      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px; "
        background
        layout="total, prev, pager, next, jumper"
        @current-change="homeworkRecordPageCurrentChange"
        :page-size="homeworkRecordTable.size"
        :current-page="homeworkRecordTable.current"
        :pager-count="5"
        :total="homeworkRecordTable.total">
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
      </span>

    </el-card>


  </el-dialog>

</template>

<script>
  import {getFullDate, getFullTime} from "../../utils/utils";
  import http from '@/utils/http'

  export default {
    name: "HomeworkDetailed",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 家庭作业记录
        homeworkRecordTable: {
          // 表格数据
          data: [],
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 家庭作业
        homework: {

        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      homeworkRecordPageCurrentChange(value){
        this.homeworkRecordTable.current = value
        this.getHomeworkRecord()
      },
      /**
       * 分页查询作业日志
       */
      getHomeworkRecord(){
        http.post("/homework/getHomeworkRecord", {
          homeworkId: this.homework.id,
          size: this.homeworkRecordTable.size,
          current: this.homeworkRecordTable.current,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.homeworkRecordTable.total = data.total;
          this.homeworkRecordTable.current = data.current;
          this.homeworkRecordTable.size = data.size;
          // 处理数据
          this.homeworkRecordTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开页面
       * @param homework 家庭作业
       */
      openHomeworkDetailed(homework){
        this.homework = homework
        this.tableConfig.show = true
        this.getHomeworkRecord()
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 时间转日期
       * @param item 要转换的时间戳
       * @return {string}
       */
      getFullDate(item){
        return getFullDate(item)
      },
    }
  }
</script>

<style scoped>

</style>
